<template>
    <el-link :underline="false">
      {{ $t('common.tip')  }}
    </el-link>
  </template>
  
  <script>
  /**
   * @group 单个组件的封装 mc-ui
   * 二次封装的刷新按钮组件
   */
  export default {
    name: 'mc-refresh',
    props: {
      // 是否开启loading
      loading: {
        type: Boolean,
        default: false
      },
      /**
       * 按钮类名,默认有蓝/白两种风格可选,可以自定义其他类名
       * 如 btnClass="white xxx aaaClass"
       */
      /**
       * 当传入的全是自定义类名时,会默认补充blue类名
       * 如 btnClass="xxx aaaClass" --自动补充后--> btnClass="blue xxx aaaClass"
       */
      btnClass: {
        // `'white'` / `'blue'`
        // blue:适用于蓝色主题,按钮颜色为白色,white:适用于白色主题,按钮颜色为黑色
        type: String,
        default: 'blue'
      },
      // 按钮样式
      btnStyle: {
        type: Object,
        default: () => {}
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      customClass () {
        const cl = []
        const list = this.btnClass.split(' ')
        let flag = false
        for (const name of list) {
          if (['white', 'blue'].includes(name)) {
            flag = true
            cl.push('mc-refresh-' + name)
          } else {
            cl.push(name)
          }
        }
        !flag && cl.push('mc-refresh-blue')
        return cl.join(' ')
      },
      refreshingStatus () {
        return this.loading ? 'rotate-status' : ''
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  $colorPrimary: #409EFF;
  .refreshStyle{
    margin: 0 10px;
    background: transparent;
    font-size: 16px;
    &:hover{
      color: $colorPrimary;
    }
  }
  .mc-refresh-blue{
    color: #fff;
  }
  .mc-refresh-white{
    color: #666;
  }
  </style>
    <docs lang="md">
     全局的刷新按钮

    ```jsx
    <mc-refresh :btn-style="{marginRight:0}" />
    ```
  </docs>